

<template>
    <div style="width:90%;margin:0 auto">
        <el-form ref="form" :model="form" :rules="rules">
            <el-form-item label="发布时间:" prop="datetime">
        <!--        <el-select v-model="form.people" placeholder="请选择">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                    ></el-option>
                </el-select>-->
                <div class="block">
                    <el-date-picker
                            v-model="form.datetime"
                            type="datetime"
                            placeholder="选择日期时间">
                    </el-date-picker>
                </div>
            </el-form-item>

            <el-form-item label="发布标题:" prop="title">
                <el-col :span="6">
                    <el-input v-model="form.title"></el-input>
                </el-col>
            </el-form-item>
            <el-form-item prop="content">
                <mavon-editor v-model="form.content" @change="handle"></mavon-editor>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" size="small" @click="submitForm('form')">发布</el-button>
                <el-button type="warning" size="small" @click="resetForm('form')">重置</el-button>
            </el-form-item>
        </el-form>
         <article v-html="myhtml"></article>
    </div>
</template>

<script>
    import { request } from "@/axios/request";
    export default {
        name: "addRelease",
        data() {
            return {
                myhtml:"",
                form: {
                    title: "",
          /*          people: "",*/
                    content: "",
                    datetime:""
                },
                // myhtml: "",
                defaultData: "preview",
                options: [
                    {
                        value: "0",
                        label: "全部"
                    },
                    {
                        value: "1",
                        label: "教练"
                    },
                    {
                        value: "2",
                        label: "学员"
                    }
                ],
                timeValue: "",
                rules: {
                    title: [
                        { required: true, message: '请输入活动名称', trigger: 'blur' },
                        { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' }
                    ],
                    datetime: [
                        { required: true, message: '请选择日期', trigger: 'change' }
                    ],

                    content: [
                        { required: true, message: '请填写内容', trigger: 'blur' }
                    ]
                }
            };
        },
        created() {},
        methods: {
            resetForm(form) {
                console.log("yes")

                this.$refs[form].resetFields();
                console.log(this.form)
            },
            handle(value, render) {
                this.myhtml = render;
                console.log(value, render);
            },


            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        /* var day = new Date();
              day.setTime(day.getTime());
              var month = day.getMonth() + 1;
              month > 10 ? (month = month) : (month = "0" + month);
              this.timeValue = day.getFullYear() + "-" + month + "-" + day.getDate();
              // eslint-disable-next-line no-undef*/
                        console.log(this.form)
                        // eslint-disable-next-line no-undef
                        request({
                            url: "/notice",
                            method: "post",
                            data: this.form
                        }).then((res) => {
                            this.$nextTick(() => { // 注意看这里
                                this.$message({
                                    message:res.data.msg,
                                    type:'success'
                                })
                            })

                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },

        }
    };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
</style>
